<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body,
			.mui-content {
				background-color: #FAFAFA;
			}
			.login-panel {
				margin-top: 30px;
			}
			.login-panel input {
				height: 50px;
				background-color: #fefefe;
			}
			#registerBtn {
				width: 90%;
				padding: 12px;
				margin-top: 30px;
				font-weight: bolder;
				color: #fff;
				background-color: #aaa;
				margin-left: 5%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="font-weight: bold;">注册</h1>
		</header>
		<div class="mui-content">
			<div class="login-panel">
				<input type="text" class="mui-input-clear" placeholder="邮箱" style="margin-bottom: 0;border-bottom: none;">
				<input type="password" class="mui-input-clear" placeholder="密码(最少8位)" style="margin-bottom: 0;border-bottom: none;">
				<input type="password" class="mui-input-clear" placeholder="密码确认">
			</div>
			<button type="button" id="registerBtn" class="mui-btn" disabled="disabled">注 册</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			document.getElementById("registerBtn").addEventListener('tap', function() {
				var email = document.querySelector("input[type=text]").value;
				var password = document.querySelectorAll("input[type=password]");
				var pwd = password[0].value;
				var repwd = password[1].value;
				if (this.disabled) {
					console.log("按钮禁用");
				} else {
					console.log("解禁");
				}
			});

			/**验证邮箱和密码*/
			document.querySelector("input[type=text]").addEventListener('keyup', function() {
				if (validateInput()) {
					document.getElementById("registerBtn").style.backgroundColor = "#cf2d28";
					document.getElementById("registerBtn").disabled = false;
				} else {
					document.getElementById("registerBtn").style.backgroundColor = "#aaa";
					document.getElementById("registerBtn").disabled = true;
				}
			});
			/**验证邮箱和密码*/
			document.querySelectorAll("input[type=password]")[0].addEventListener('keyup', function() {
				if (validateInput()) {
					document.getElementById("registerBtn").style.backgroundColor = "#cf2d28";
					document.getElementById("registerBtn").disabled = false;
				} else {
					document.getElementById("registerBtn").style.backgroundColor = "#aaa";
					document.getElementById("registerBtn").disabled = true;
				}
			});
			document.querySelectorAll("input[type=password]")[1].addEventListener('keyup', function() {
				if (validateInput()) {
					document.getElementById("registerBtn").style.backgroundColor = "#cf2d28";
					document.getElementById("registerBtn").disabled = false;
				} else {
					document.getElementById("registerBtn").style.backgroundColor = "#aaa";
					document.getElementById("registerBtn").disabled = true;
				}
			});

			function validateInput() {
				var email = document.querySelector("input[type=text]").value;
				var password = document.querySelectorAll("input[type=password]");
				var pwd = password[0].value;
				var repwd = password[1].value;
				if (email.trim() != "") {
					if (pwd.trim().length >= 8) {
						if (repwd.trim().length >= 8) {
							var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
							if (reg.test(email)) {
								if (pwd.trim() == repwd.trim()) {
									return true;
								}
							}
						}
					}
				}
				return false;
			}
		</script>
	</body>

</html>